<template>
	<view class="page">
		<view class="card top-card u-flex u-flex-xy-center">
			<view class="logo">
				<u-avatar :src="program.logo" shape="square" size="60"></u-avatar>
				<!-- <image src="../../static/icon/logo.png" mode="widthFix" style="height: 48px;width: 148px;"></image> -->
			</view>
			<view class="u-flex-fill">
				<view class="title">
					{{ program.name }}
				</view>
				<view class="desc">
					地点：{{ program.addr }}
				</view>
			</view>
		</view>
		<view class="view">
			<view class="card">
				<view class="card-title">
					PUE
				</view>
				<view class="card-content u-flex u-flex-y-center">
					<view class="u-flex u-flex-xy-center" style="width: 96px;">
						<view class="pue-box">
							<view class="pue-box-val">{{ pue }}</view>
							<view class="pue-box-name">PUE</view>
						</view>
					</view>
					<view style="flex: 1;" class="u-flex u-flex-xy-center" >
						<view style="width: 240px;height:150px;" >
							<qiun-data-charts
								type="gauge"
								:chartData="pueChartData"
								background="none"
								:animation="false"
								:tooltipShow="false"
								:opts="pueChartOpt"
							  />
						</view>
					</view>
					
				</view>
			</view>
		
		</view>
		<view class="view">
			<view class="card status-all-view">
				<view class="card-title">
					状态总览
				</view>
				<view class="card-content u-flex u-flex-xy-center">
					<view class="content-left u-flex u-flex-xy-center u-border-right">
						<view class="u-text-center">
							<view class="total">{{ mode.total }}</view>
							<view class="tip">模块总数</view>
						</view>
					</view>
					<view class="content-right u-flex-fill u-flex">
						<view class="u-flex-fill status-item">
							<!-- <view class="progress"><u-line-progress :percentage="50" :showText="false"></u-line-progress></view>-->
							<view class="ver-line">
								<view class="line-content"></view>
							</view>
							<view class="total2">{{ mode.normal }}</view>
							<view class="tip">正常</view>
						</view>

						<view class="u-flex-fill status-item">
								<!-- <view class="progress"><u-line-progress :percentage="50" :showText="false"></u-line-progress></view> -->
								<view class="ver-line">
									<view class="line-content alarm"></view>
								</view>
							<view class="total2">{{ mode.alarm }}</view>
							<view class="tip">告警</view>
						</view>

						<view class="u-flex-fill status-item">
							<!-- <view class="progress"><u-line-progress :percentage="50" :showText="false"></u-line-progress></view> -->
							<view class="ver-line">
								<view class="line-content offline"></view>
							</view>
							<view class="total2">{{ mode.off_line }}</view>
							<view class="tip">离线</view>
						</view>
					</view>
				</view>
			</view>

			<view class="card alarm-trend">
				<view class="card-title">
					近7天告警总数趋势
				</view>
				<view class="chart">
					<qiun-data-charts type="line" :chartData="chartData" background="none"
						:opts="alarmChartOpt" />
				</view>
			</view>

			<view class="card renew-alarm">
				<view class="card-title" style="margin-bottom: 16px;">
					最新5条告警
				</view>
				<view class="item" v-for="(row, ind) in alaramList" :key="ind" @click="toAlarmDetail(row)">
					<view class="desc u-flex">
						<u-tag text="普通" type="primary" size="mini" plain v-if="row.level === 1"></u-tag>
						<u-tag text="严重" type="warning" size="mini" plain v-if="row.level === 2"></u-tag>
						<u-tag text="紧急" type="error" size="mini" plain v-if="row.level === 3"></u-tag>
						<u-tag text="已恢复" type="success" size="mini" plain v-if="row.status === 1"></u-tag>
						<u-tag text="未恢复" type="error" size="mini" plain v-if="row.status === 0"></u-tag>
						<view class="text u-line-1 u-flex-fill w0">
							{{ row.desc }}
						</view>
					</view>
					<view class="device u-flex">
						<view class="device-title u-flex-fill w0 u-line-1">
							<text class="label">来源:</text> {{ row.device }}
						</view>
						<view class="alarm-time">
							{{ $u.date(row.start*1000, 'mm-dd hh:MM:ss') }}
						</view>
					</view>
				</view>
			</view>
				
			
		</view>
	</view>

</template>

<script>
	import {genAlarms} from '@/mock/alarm'
	import { dateFormat } from '@/mock/date'
	// import {genRtdata, zoneEnum} from '@/mock/rtdata'
	export default {
		data() {
			return {
				wea: {},
				program: {
					logo: '/static/icon/monitor-icon.png',
					name: '伊顿微模块',
					addr: '广东省深圳市'
				},
				mode: {
					total: 6,
					normal: 5,
					alarm: 1,
					off_line: 0,
				},
				chartData: {
					categories: [],
					series: [],
				},
				alaramList: [],
				alarmChartOpt:{
					color: ['#fa5151', '#FA9E3B'], 
					legend: {show: true},
					dataLabel: false,
					extra: {
						line: {
					        type: "curve",
						}
					},
				},
				pue:1.25,
				pueChartData:{
					    "categories": [
					        {
					            "value": 0.5,
					            "color": "#2fc25b"
					        },
					        {
					            "value": 0.75,
					            "color": "#f39b10"
					        },
					        {
					            "value": 1,
					            "color": "#f04864"
					        }
					    ],
					    "series": [
					        {
					            "name": "PUE",
					            "data": 0.25
					        }
					    ]
				},
				pueChartOpt:{
					"title": {
					        "name": "",
					    },
					    "subtitle": {
					        "name": "",
					    },
						"extra": {
						        "gauge": {
						            "type": "default",
						            "width": 20,
						            "labelColor": "#666666",
						            "labelOffset": 13,
						            "startAngle": 0.75,
						            "endAngle": 0.25,
						            "startNumber": 1,
						            "endNumber": 2,
						            "format": "",
						            "splitLine": {
						                "fixRadius": 0,
						                "splitNumber": 2,
						                "width": 20,
						                "color": "#fff",
						                "childNumber": 5,
						                "childWidth": 5
						            },
						            "pointer": {
						                "width": 15,
						                "color": "auto"
						            },
						            "labelFormat": ""
						        }
						    }
				},
				updateInterval:null
			}
		},
		onLoad() {
			// console.log(zoneEnum)
			// setTimeout(() => {
			// 	uni.$u.http.get('/api/websrv/rtdata?a=b').then(res => {
			// 		console.log(res)
			// 	})
			// }, 1000)

			setTimeout(()=>{
				this.updatePue()
			},1000)
			
			// this.$u.vuex('vuex_user', '1212')
			this.check()
			// this.weather()
			this.sevenTrend()
			this.getAlarmList()
		},
		onUnload(){
			if(this.updateInterval){
				clearTimeout(this.updateInterval)
			}
		},
		methods: {
			toUrl(u) {
				uni.navigateTo({
					url: u
				})
			},
			toAlarmDetail(row) {
				uni.navigateTo({
					url: '../alarm/detail?id='+row.id
				})
			},
			// 判断是否登录
			check() {
				if (!(this.gUser && this.gUser.id)) {
					uni.reLaunch({
						url: '/pages/sign/sign'
					})
				}
			},
			// 测试接口
			async weather() {
				let res = await this.$api.test.tq('克拉玛依').catch(e => {
					console.log(e)
				})
				this.wea = res
				console.log(this.wea)
			},
			// 最新告警
			getAlarmList() {
				let list = genAlarms()
				this.alaramList = list.filter((v, i) => i < 5)
				// console.log(this.alaramList)
			},
			// 7天趋势
			sevenTrend() {
				
				var today = new Date()
				today.setHours(0,0,0)
				var categories=[]
				for (var i = 6; i > -1; i--) {
					var day = today.getTime() - i*24*60*60*1000
					var dayStr = dateFormat("mm-dd",new Date(day))
					categories.push(dayStr)
				}
				this.chartData = {
					"categories": categories,
					"series": [{
						"name": "紧急告警",
						"data": [
							1,
							2,
							1,
							2,
							2,
							0,
							1
						]
					},{
						"name": "严重告警",
						"data": [
							0,
							0,
							1,
							3,
							4,
							1,
							2
						]
					}]
				}
			},
			// 更新PUE
			updatePue(){
				if(this.updateInterval){
					clearTimeout(this.updateInterval)
				}
				var pue =(1.1+ (Math.random()*25)/100).toFixed(2)
				this.pueChartData.series[0].data = (pue-1)
				this.pue = pue
				this.updateInterval= setTimeout(()=>{
					this.updatePue()
				},5000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-card {
		margin: 0;
		border-radius: 0;

		.logo {
			margin-right: 30rpx;
		}

		.title {
			font-size: 32rpx;
		}

		.desc {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: $u-tips-color;
		}
	}
	.status-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.pue-box{
		text-align: center;
		width: 96px;
		.pue-box-val{
			font-size: 32px;
			color: #FFFFFF;
			letter-spacing: 0;
			line-height: 36px;
			font-weight: 500;
		}
		.pue-box-name{
			margin-top: 8px;
			color: rgba(255,255,255,0.45);
			font-size: 12px;
		}
	}
	
	.ver-line {
		
		width: 8rpx;
		height: 100px;
		background-color: #161819;
		border-radius: 5px;
		display: flex;
		flex-direction: column-reverse;
		.line-content {
			width: 100%;
			height: 80%;
			border-radius: 5px;
			background-color: #07C160;
			&.alarm {
				height: 10%;
				background-color: #FA5151;
			}
			&.offline {
				background-color: #999999;
				height: 0%;
			}
		}
	}

	.view {
		.status-all-view {
			margin-top: 0;

			.card-content {
				height: 260rpx;

				.content-left {
					height: 100%;
					width: 200rpx;

					.total {
						font-size: 60rpx;
						color: $u-main-color;
						margin-bottom: 20rpx;
						// font-weight: bold;
					}
				}

				.content-right {
					margin-left: 20rpx;
					height: 100%;

					/deep/ .u-line-progress {
						transform: rotate(-90deg);
						width: 100px;
					}

					.progress {
						height: 100px;
					}
				}

				.tip {
					color: $u-light-color;
					font-size: 24rpx;
				}
			}
		}

		.alarm-trend {
			padding: 30rpx 0;

			.card-title {
				padding-left: 30rpx;
			}

			.chart {
				padding-right: 30rpx;
			}
		}
		
		.renew-alarm {
			.item {
				margin-bottom: 30rpx;
				border-bottom: 2rpx solid $u-light-color;
				padding-bottom: 20rpx;
				&:nth-last-child(1) {
					margin-bottom: 0;
					border: none;
				}
				.desc {
					/deep/ .u-tag {
						margin-right: 20rpx !important;
					}
					.text {
						font-size: 32rpx;
					}
				}
				.device {
					margin-top: 20rpx;
					.device-title {
						font-size: 26rpx;
						color: $u-tips-color;
					}
					.alarm-time {
						font-size: 24rpx;
						color: $u-light-color;
					}
				}
			}
		}
	}
</style>
